<template>
    <div class="barFixed">
        <div class="tabbar">
            <div class="bar" @click="toTargetPage('/')">
                <div class="icon one" :class="{ active: tabbar.home }"></div>
                <div class="title" :class="{ color: tabbar.home }">首页</div>
            </div>
            <div class="bar" @click="toTargetPage('/category')">
                <div class="icon two" :class="{ active: tabbar.category }"></div>
                <div class="title" :class="{ color: tabbar.category }">分类</div>
            </div>
            <div class="bar" @click="toTargetPage('/worthbuy')">
                <div class="icon three" :class="{ active: tabbar.worthbuy }"></div>
                <div class="title" :class="{ color: tabbar.worthbuy }">值得买</div>
            </div>
            <div class="bar" @click="toTargetPage('/shopCart')">
                <div class="icon four" :class="{ active: tabbar.shopcart }"></div>
                <div class="title" :class="{ color: tabbar.shopcart }">购物车</div>
            </div>
            <div class="bar" @click="toTargetPage('/center')">
                <div class="icon five" :class="{ active: tabbar.center }" ></div>
                <div class="title" :class="{ color: tabbar.center }">个人</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'Tabbar',
})
</script>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

interface tabbarData {
    home: boolean,
    category: boolean,
    worthbuy: boolean,
    shopcart: boolean,
    center: boolean
}
let tabbar = ref<tabbarData>({
    home: false,
    category: false,
    worthbuy: false,
    shopcart: false,
    center: false
})
function toTargetPage(target: string) {
    router.push(target)
}
watch(() => route.path, () => {
    tabbar.value = {
        home: false,
        category: false,
        worthbuy: false,
        shopcart: false,
        center: false
    }
    if (route.path === '/') tabbar.value.home = true
    if (route.path === '/category') tabbar.value.category = true
    if (route.path === '/worthbuy') tabbar.value.worthbuy = true
    if (route.path === '/shopcart') tabbar.value.shopcart = true
    if (route.path === '/center') tabbar.value.center = true
}, { immediate: true })

</script>

<style lang="less" scoped>
.barFixed {
    width: 375px;
    position: fixed;
    bottom: 0;
    z-index: 999;
}

.tabbar {
    padding-top: 4px;
    border-top: 0.5px solid #d9d9d9;
    height: 44.5px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        

        .icon {
            width: 20px;
            height: 22px;
            background-image: url('https://yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/tabBar-03798737fd389001ec3da466a3fa4462.png');
            background-size: 82.5px 62px;
        }

        .one {
            background-position: 41px -20px;

            &.active {
                background-position: 41px 0px;
            }
        }

        .two {
            background-position: 62px -20px;

            &.active {
                background-position: 0px -20px;
            }
        }

        .three {
            background-position: 62px -41px;

            &.active {
                background-position: 0px -41px;
            }
        }

        .four {
            background-position: -21px 1.5px;

            &.active {
                background-position: 0px 0px;
            }
        }

        .five {
            background-position: -62px 1px;

            &.active {
                background-position: -41px -41px;

            }
        }

        .title {
            // margin-top: 2px;
            font-size: 12px;
            color:#7f7f7f;
            &.color{
                color: #B4282D;
            }

        }

    }
}
</style>